<!DOCTYPE html>
<html>
<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>传智健康</title>
    <meta name="description" content="传智健康">
    <meta name="keywords" content="传智健康">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../css/style.css">

    <link rel="stylesheet" href="//unpkg.com/element-ui@2.13.2/lib/theme-chalk/index.css">

    <!-- 引入组件库 -->
    <script src="../js/vue.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
    <script src="../plugins/echarts/echarts.js"></script>

    <script src="//unpkg.com/vue/dist/vue.js"></script>
    <script src="//unpkg.com/element-ui@2.13.2/lib/index.js"></script>


</head>
<body class="hold-transition">
<div id="app">


    <template>
        <div class="block">
            <span class="demonstration">请选择日期</span>
            <el-date-picker
                    v-model="value1"
                    type="datetimerange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
            </el-date-picker>


            <el-button type="primary" @click="show()">确定</el-button>

        </div>
    </template>



    <div class="content-header">
        <h1>统计分析
            <small>预约/到诊统计</small>
        </h1>
        <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>统计分析</el-breadcrumb-item>
            <el-breadcrumb-item>预约/到诊统计</el-breadcrumb-item>
        </el-breadcrumb>
    </div>



</div>

<div class="app-container">
    <div class="box">
        <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
        <div id="chart1" style="height:600px;"></div>
    </div>
</div>


</body>

<script>
    // 基于准备好的dom，初始化echarts实例

    var myChart = echarts.init(document.getElementById('chart1'));
    var vue = new Vue({
        el: '#app',
        data: {
            value1:['2020-10-08','2020-10-20'],
            days: [],
            orderCount: [],
            actuallyComeCount: []
        },
        created(){
            this.show()
        },
        methods: {
            show() {
                    dateList = {
                        date1: this.value1[0],
                        date2: this.value1[1]
                    },
                    axios.post("/report/getOrderReport.do",dateList).then((res) => {
                        myChart.setOption(
                                {
                                title: {
                                    text: '后管数据统计(一)'
                                },
                                tooltip: {
                                    trigger: 'axis'
                                },
                                legend: {
                                    data: ['每日预约数', '每日到诊数']
                                },
                                grid: {
                                    left: '3%',
                                    right: '4%',
                                    bottom: '3%',
                                    containLabel: true
                                },
                                toolbox: {
                                    feature: {
                                        saveAsImage: {}
                                    }
                                },
                                xAxis: {
                                    type: 'category',
                                    boundaryGap: false,
                                    data: res.data.data.days
                                },
                                yAxis: {
                                    type: 'value'
                                },
                                series: [
                                    {
                                        name: '每日预约数',
                                        type: 'line',
                                        stack: '总量',
                                        data: res.data.data.orderCount
                                    },
                                    {
                                        name: '每日到诊数',
                                        type: 'line',
                                        stack: '总量',
                                        data: res.data.data.actuallyComeCount
                                    }
                                ]
                            });
                    });
            }
        }
    });

</script>


</html>



